<div class="login-container">
  <div class="login-form-wrapper">
    <div class="login-header">
      <h2>用户登录</h2>
      <p>欢迎回来，请输入您的登录信息</p>
    </div>
    
    <form nz-form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="login-form">
      <!-- 邮箱输入框 -->
      <nz-form-item>
        <nz-form-label [nzSpan]="24" nzRequired>邮箱</nz-form-label>
        <nz-form-control [nzSpan]="24" [nzErrorTip]="getFieldError('email')">
          <input 
            nz-input 
            type="email"
            formControlName="email" 
            placeholder="请输入邮箱"
            [nzStatus]="hasFieldError('email') ? 'error' : ''"
          />
        </nz-form-control>
      </nz-form-item>

      <!-- 密码输入框 -->
      <nz-form-item>
        <nz-form-label [nzSpan]="24" nzRequired>密码</nz-form-label>
        <nz-form-control [nzSpan]="24" [nzErrorTip]="getFieldError('password')">
          <input 
            nz-input 
            type="password" 
            formControlName="password" 
            placeholder="请输入密码"
            [nzStatus]="hasFieldError('password') ? 'error' : ''"
          />
        </nz-form-control>
      </nz-form-item>

      <!-- 记住我复选框 -->
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <label nz-checkbox formControlName="remember">
            记住我
          </label>
        </nz-form-control>
      </nz-form-item>

      <!-- 登录按钮 -->
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <button 
            nz-button 
            nzType="primary" 
            nzSize="large"
            [nzLoading]="loading"
            [disabled]="loginForm.invalid"
            type="submit"
            class="login-button"
          >
            {{ loading ? '登录中...' : '登录' }}
          </button>
        </nz-form-control>
      </nz-form-item>

      <!-- 额外链接 -->
      <div class="login-footer">
        <a href="#" class="forgot-password">忘记密码？</a>
        <span class="divider">|</span>
        <a (click)="goToRegister()" class="register-link">还没有账号？立即注册</a>
      </div>
    </form>
  </div>
</div>
